<template>
  <div>
    <el-button type="primary" @click="addLabel">添加标签</el-button>
    <el-table
      style="margin: 20px 0"
      border
      :data="labelList"
      class="table"
      header-cell-class-name="table-header"
    >
      <el-table-column label="分类名称" align="center">
        <template>
          <span>{{ sortName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="labelName"
        label="标签名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="labelDescription"
        label="标签描述"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="320" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >
            编辑标签
          </el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: var(--orangeRed)"
            @click="handleDelete(scope.row.labelId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout=" total,prev, pager, next"
        :total="total"
        :current-page="query.current"
        :page-size="query.size"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="标签"
      :visible.sync="dialogLabel"
      width="30%"
      :before-close="handleClose"
      :append-to-body="true"
      destroy-on-close
      center
    >
      <div class="my-dialog">
        <el-input placeholder="请输入标签名称" v-model="labelInfo.labelName">
          <template slot="prepend">标签名称</template>
        </el-input>
        <el-input
          placeholder="请输入标签描述"
          v-model="labelInfo.labelDescription"
        >
          <template slot="prepend">标签描述</template>
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="saveLabelEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogLabel: false,
      labelInfo: {
        labelName: "",
        labelDescription: "",
        labelId: null,
        sortId: null,
      },
      row: {},
      sortName: "",
      query: {
        current: 1,
        size: 10,
        sortId: "",
      },
      labelList: [],
      total: 0,
    };
  },

  mounted() {
    this.sortName = this.$route.query.name;
    this.query.sortId = this.$route.query.id;
    this.getLabelList();
  },

  methods: {
    changePage(opt) {
      this.query.current = opt
      this.getLabelList()
    },
    getLabelList() {
      this.$createHttp.labelList(this.query).then((res) => {
        if (res.code === 200) {
          this.labelList = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    addLabel() {
      this.dialogLabel = true;
      this.labelInfo.sortId = this.query.sortId;
      this.labelInfo.labelName = "";
      this.labelInfo.labelDescription = "";
      this.labelInfo.labelId = null;
    },
    handleEdit(row) {
      this.dialogLabel = true;
      this.labelInfo.sortId = this.query.sortId;
      this.labelInfo.labelName = row.labelName;
      this.labelInfo.labelDescription = row.labelDescription;
      this.labelInfo.labelId = row.labelId;
    },
    handleDelete(id) {
      let param = {
        id: id,
      };
      this.$confirm("确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
      }).then(() => {
        this.$createHttp.labelDelete(param).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getLabelList();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      });
    },
    saveLabelEdit() {
      if (this.labelInfo.labelId) {
        this.$createHttp.updateLabel(this.labelInfo).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getLabelList();
            this.dialogLabel = false;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      } else {
        this.$createHttp.addLabel(this.labelInfo).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.getLabelList();
            this.dialogLabel = false;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      }
    },
    handleClose() {
      this.dialogLabel = false;
      this.labelInfo = {
        labelName: "",
        labelDescription: "",
        labelId: null,
        sortId: null,
      };
    },
  },
};
</script>

<style scoped>
.my-dialog > div {
  margin: 12px;
}

.my-dialog >>> input::-webkit-inner-spin-button {
  appearance: none;
}

.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
